<template>
  <div class="mark-six-box">
    <Popup v-model:show="show" position="bottom" class="investPopupHeight" :overlay="false">
      <!--下注底部弹窗-->
      <div class="popup">
        <div class="top-box row-space-between" @click="show = !show">
          <div class="left-box all-center">
            <div class="content"></div>
          </div>
          <div class="center-box all-center">
            单期最高派奖{{ numberToChinese(allGame?.[lotteryCode]?.maxReward) }}万
          </div>
          <div class="right-box all-center">
            <Icon name="arrow-down" color="#fff" size="22" />
          </div>
        </div>

        <BetPro :lotteryCode="lotteryCode" ref="mainuRef" />
      </div>
    </Popup>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { useGameStore } from '@/stores/game'
import { numberToChinese } from '@/utils'
import { storeToRefs } from 'pinia'
import BetPro from './betPro.vue'
import { Popup, Icon } from 'vant'

type Props = {
  lotteryCode: string
}

defineProps<Props>()

const gameStore = useGameStore()

const { allGame } = storeToRefs(gameStore)

const show = ref(false)

const mainuRef = ref()

const open = () => {
  show.value = true
  nextTick(() => {
    mainuRef.value?.open()
  })
}

defineExpose({
  open,
})
</script>

<style scoped lang="less">
.investPopupHeight {
  background-color: transparent;
}

.mark-six-box {
  width: 100%;
  position: relative;
  height: 100%;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    height: var(--investPopupHeight);
    background-color: transparent;

    .top-box {
      box-sizing: border-box;
      height: 27px;
      width: 100%;
      padding: 0 15px;
      background: linear-gradient(180deg, #7065f0 0%, #5c52d4 100%);
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;

      .left-box {
        height: 100%;
        width: 20px;
        max-width: 40px;
      }

      .center-box {
        height: 100%;
        flex: 1;

        .content {
          width: 41px;
          height: 3px;
          border-radius: 6px;
          background: #505e92;
        }
      }

      .right-box {
        width: 20px;
        max-width: 40px;
        height: 100%;
      }
    }
  }
}
</style>
